<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="incloude/common::common_header(~{::meta},~{::link})"></head>
<head>
    <title>系统登陆日志列表</title>
</head>

<body>

<div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-card-body">
                                        <div class="table-reload-btn" style="margin-bottom: 10px;">
                                            <form class="layui-form">
                                                <div class="layui-form-item">
                                                    <div class="layui-inline">
                                                        <div class="layui-input-inline">
                                                            <input type="text" id="createDateStart" class="layui-input" placeholder="开始时间" autocomplete="off">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="text" id="createDateEnd" class="layui-input" placeholder="结束时间" autocomplete="off">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="text" id="username" class="layui-input" placeholder="用户名" autocomplete="off">
                                                        </div>
                                                    </div>
                                                    <div class="layui-inline">
                                                        <button type="button" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i></button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <table class="layui-hide" id="table" lay-filter="table"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div th:replace="incloude/common::common_js"></div>
<div th:replace="incloude/common::layui_config"></div>
<script type="text/javascript" th:inline="none">
    layui.use(['layer','table','form','laydate'], function(){
        const table = layui.table;
        const layer = layui.layer;
        const form = layui.form;
        const laydate = layui.laydate;
        const Log = { TableId:"table" };

        //重载表格
        Log.Search = function (){
            var queryData = {};
            queryData['username'] = $("#username").val();
            queryData['createDateStart'] = $("#createDateStart").val();
            queryData['createDateEnd'] = $("#createDateEnd").val();
            table.reload(Log.TableId, {page: { curr: 1 },where: queryData});
        };

        //初始化表格列
        Log.InitColumn = function(){
            return [[
                {type: 'numbers', title: '序号'},
                {field: 'username', title: '用户名'},
                {field: 'remoteAddr', title: '登陆IP'},
                {field: 'userAgent', title: '用户代理'},
                {field: 'createDate', title: '登陆时间', templet : "<div>{{layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
            ]];
        };

        table.render({
            elem: '#' + Log.TableId,
            url: adminPath + '/log/findByPage',
            cols: Log.InitColumn(),
            cellMinWidth: 100,
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            where:{'logType': 0},
            page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                Log.Search();
            }
        };

        //监听行工具事件
        table.on('tool('+Log.TableId+')', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                window.location.href= adminPath + '/log/form?id='+data.id;
            }
        });

        //开始日期
        var insStart = laydate.render({
            elem: '#createDateStart'
            ,done: function(value, date){
                //更新结束日期的最小日期
                insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });

        //结束日期
        var insEnd = laydate.render({
            elem: '#createDateEnd'
            ,min: 0
            ,done: function(value, date){
                //更新开始日期的最大日期
                insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        $('.table-reload-btn .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>

</body>

</html>